{% extends 'base.html' %}
{% load static %}
{% load my_filters_and_tags %}

{% block content %}
    <div class="py-4">
        <div class="container" style="margin-top: 50px;">
            <div class="row">
                <!-- Main Content -->
                <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">

                    {% for post in data %}
                        <div class="box shadow-sm border rounded bg-white mb-3">
                            <div class="box-title border-bottom p-3" id="main">
                                <div id="left" style="float:left;"><h6 class="m-0">{{ post.title }} </h6></div>
                                <div id="right" style="float:right;"><p>{{ post.create_datetime|timesince_zh }}</p></div>
                                <br>
                            </div>

                            <div id="main" class="box-body p-3 min-vh-15" style="width:100%; ">
                                <div style="width:65%; float:left; margin-right: 20px; ">
                                    {{ post.intro|truncatechars:130}}......    <!-- {{ post.content|truncatechars:100 }} 截取100个字符 -->
                                </div>
                                <div id="right" style="width:30%; float:right; left: 20px;">
                                    <img src="{% static 'img/logo.jpeg' %}" alt="" style="width: auto; height: 100px; ">
                                </div>

                            </div>

                            <div class="box-body p-3" id="main">
                                <a class="mr-2 font-weight-bold" href="{% url 'blog_post' blogpage_id=post.id %}" target="_blank">Read
                                    More</a>
                            </div>

                        </div>
                    {% endfor %}

                    <!-- 分页功能 -->
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if data.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" aria-label="Previous"
                                       href="?page={{ data.previous_page_number }}">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>

                            {% endif %}
                            {% for page_num in data.paginator.page_range %}
                                <li {% if page_num == data.number %} class="page-item active" {% else %} class="page-item" {% endif %}>
                                    <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                                </li>
                            {% endfor %}
                            {% if data.has_next %}
                                <li class="page-item">
                                    <a href="?page={{ data.next_page_number }}"
                                       class="page-link" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>

                </main>

                <aside class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
                    <div class="box mb-3 shadow-sm border rounded bg-white profile-box text-center">
                        <div class="p-5">
                            <img src="img/clogo2.png" class="img-fluid" alt="Responsive image">
                        </div>
                        <div class="p-3 border-top border-bottom">
                            <h5 class="font-weight-bold text-dark mb-1 mt-0">Envato</h5>
                            <p class="mb-0 text-muted">Melbourne, AU
                            </p>
                        </div>
                        <div class="p-3">
                            <div class="d-flex align-items-top mb-2">
                                <p class="mb-0 text-muted">Posted</p>
                                <p class="font-weight-bold text-dark mb-0 mt-0 ml-auto">1 day ago</p>
                            </div>
                            <div class="d-flex align-items-top">
                                <p class="mb-0 text-muted">Applicant Rank</p>
                                <p class="font-weight-bold text-dark mb-0 mt-0 ml-auto">25</p>
                            </div>
                        </div>
                    </div>

                </aside>

                <aside class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">
                    <a href="{% url 'blog_add' %}" target="_blank">
                        <button type="button" class="btn btn-lg btn-block btn-primary mb-3"><i class="feather-edit"></i>
                            Share an article
                        </button>
                    </a>

                    <div class="box shadow-sm border rounded bg-white mb-3">
                        <div class="box-title border-bottom p-3">
                            <h6 class="m-0">Who viewed your profile</h6>
                        </div>
                        <div class="box-body p-3">
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="img/p4.png" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Sophia Lee</div>
                                    <div class="small text-gray-500">@Harvard
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-outline-primary btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="img/p9.png" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">John Doe</div>
                                    <div class="small text-gray-500">Traveler
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-outline-primary btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="img/p10.png" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Julia Cox</div>
                                    <div class="small text-gray-500">Art Designer
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-outline-primary btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="img/p11.png" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Robert Cook</div>
                                    <div class="small text-gray-500">@Photography
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-outline-primary btn-sm">Connent</button>
                           </span>
                            </div>
                            <div class="d-flex align-items-center osahan-post-header people-list">
                                <div class="dropdown-list-image mr-3">
                                    <img class="rounded-circle" src="img/p12.png" alt="">
                                    <div class="status-indicator bg-success"></div>
                                </div>
                                <div class="font-weight-bold mr-2">
                                    <div class="text-truncate">Richard Bell</div>
                                    <div class="small text-gray-500">@Envato
                                    </div>
                                </div>
                                <span class="ml-auto"><button type="button"
                                                              class="btn btn-outline-primary btn-sm">Connent</button>
                           </span>
                            </div>
                        </div>
                    </div>

                </aside>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>

        // 页面框架加载完成之后自动执行函数
        $(function () {
            bindClickSubmit();
        });

        function bindClickSubmit() {
            $('#btnSubmit').click(function () {
                $('.error-msg').empty();

                // 收集表单中的数据（找到每一个字段）$('#regForm').serialize()
                // 数据ajax发送到后台
                $.ajax({
                    url: {% url 'mood' %},
                    type: "POST",
                    data: $('#moodForm').serialize(), // 所有字段数据 + csrf token
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            location.href = {% url 'mood' %};
                            // location.href = location.href //指向本页面，不刷新
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}